import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"


type DataType = {
  name: string 
  A: string 
  B: string 
  C: string 
}

type ItemNodeProps<T> = {
  option: {
    label: string
    value: keyof T
  }[]
  data: T
}



const ItemNode = <T,>({ option, data }: ItemNodeProps<T>) => {
  return <div className="w-full pl-[74px] h-[48px] bg-[url(@/assets/svg/EventDanger-1.svg)] flex items-center">
    {
      option.map((item, index) => {
        return <div key={index} className={`text-center ${index?'flex-2':'flex-1'} ${textColorClass.text_default}`}>{`${data[item.value]}`}</div>
      })
    }

    {/* <div className="flex-2 text-center">111</div>
    <div className="flex-2 text-center">111</div>
    <div className="flex-2 text-center">111</div> */}
  </div>
}

const option:ItemNodeProps<DataType>['option'] = [
  {
    label: '',
    value: 'name'
  },
  {
    label: '高危事件',
    value: 'A'
  },
  {
    label: '中危事件',
    value: 'B'
  },
  {
    label: '低危事件',
    value: 'C'
  },
]


const dataSorce: DataType[] = [
  {
    name: '移动',
    A: '3456',
    B: '3456',
    C: '3456',
  },
  {
    name: '电信',
    A: '3456',
    B: '3456',
    C: '3456',
  },
  {
    name: '联通',
    A: '3456',
    B: '3456',
    C: '3456',
  },
  {
    name: '合计',
    A: '3456',
    B: '3456',
    C: '3456',
  },
]



const EventDanger = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[310px] flex flex-col items-center justify-between gap-[12px]"
    header={
      <TitleMain title="危险事件量" />
    }
  >
    <div className="w-full pl-[74px] flex-1 flex items-center">
      {
        option.map((item,index)=>{
          return <div key={index} className={`text-center ${index?'flex-2':'flex-1'} ${textColorClass.text_default}`}>{item.label}</div>
        })
      }
    </div>
    {
      dataSorce.map((item, index) => {
        return <ItemNode<DataType> key={index} option={option} data={item} />
      })
    }


  </ItemMoudle>
}

export default EventDanger